
<template>
  <div>

    <div :style="{ overflow: textCollapsed ? 'hidden' : 'visible', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }">
      <span v-if="textCollapsed && truncatedText">{{ truncatedText }}...</span>
      <span v-else>{{ text }}</span>
    </div>
    <button v-if="textCollapsed" @click="textCollapsed = !textCollapsed">展开</button>
    <button v-else @click="textCollapsed = !textCollapsed">折叠</button>
  </div>
</template>

<script>
export default {
data() {
  return {
    text: '这是一段很长的文本，超过十个字符将会显示为省略号，并且具有折叠和展开的功能。',
    textCollapsed: true,
  };
},
computed: {
  truncatedText() {
    return this.text.substring(0, 10);
  },
},
};
</script>
<style scoped>

</style>